<template>
    <div class="person">
        Mouse position is at: {{ x }}, {{ y }}
    </div>
    <div class="person">
        <p>姓名：{{ person.name }}-----年龄：{{ person.age }}</p>
        <button @click="ChangeName">点击修改姓名</button>
        <button @click="ChangeAge">点击修改年龄</button>
    </div>
    <div class="person">
        姓：<input type="text" v-model="firstName"> <br>
        名：<input type="text" v-model="lastName"> <br>
        全名：<span>{{ fullName }}</span> <br>
        <span>{{ num }}</span><button @click="num++">num++</button>
        <button @click="changeFullName">全名改为：li-si</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, toRef, toRefs,ref ,computed,watch} from "vue"
import { useMouse } from '@/hooks/mouse'

const { x, y } = useMouse()

const person = reactive({ name: 'xiaoyu', age: 18 })
let { name } = toRefs(person)
let age = toRef(person, "age")
function ChangeName() {
    // person.name+=" yu"
    name.value += " yu"
}
function ChangeAge() {
    // person.age+=1
    age.value += 1
}
watch(person,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
})
watch(()=>person.age,(n,o)=>{
    console.log(n,o);
    
})

let firstName=ref("Xiao")
let lastName=ref("Yu")
//首先只computed只读不修改
// let fullName=computed(()=>{
//     return firstName.value+" "+lastName.value
// })
// 下面的是可读可修改
let fullName=computed({
    get(){
        return firstName.value+" "+lastName.value
    },
    set(value){
        console.log(value);
        let arr=value.split("-")
        firstName.value=arr[0]
        lastName.value=arr[1]
    }
})

function changeFullName(){
    fullName.value="li-si"
}
let num=ref(0)
/* 监听ref定义的基本类型数据！！！ */   
const stopWatch=watch(num,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
    if(num.value==5){
        stopWatch()//取消监听事件！！
    }
})


</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

.person+div {
    margin-top: 8px;
}

li {
    font-size: 20px;
}

button {
    margin: 0 10px;
}
</style>